<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>局部注册组件</h2>
    <my-header></my-header>
    <my-content></my-content>
  </div>

  <script src="../vue3.js"></script>
  <script>
    const {createApp} = Vue;

    // 局部注册是以对象的方式进行注册的
    // 取名只允许用大驼峰
    // 需要有template选项，其他的选项也都可以用
    const MyHeader = {
      template: `<header>这是头部</header>`
    };

    // 用const定义的变量需要先定义再使用
    const MyContentItem = {
      template: `<div>内容一</div>`
    }

    const MyContent = {
      components: {
        MyContentItem
      },
      template: `<main>这是内容<my-content-item></my-content-item></main>`
    };

    

    const app = createApp({
      components: {
        MyHeader: MyHeader,
        MyContent
      }
    });

    app.mount("#app");
  </script>
</body>
</html>